import { PureComponent } from 'react'
import { Modal, Input, Select } from 'antd'
import styles from './operatorManage.less'
const { Option } = Select
const children = []
for (let i = 10; i < 36; i++) {
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
  }
  
class OperatorManageModal extends PureComponent {
    
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
    }
    handleChange = (value) => {
        console.log(`selected ${value}`);
    }
    render(){
        const { visible } = this.props
        return(
            <Modal
            title="创建包单"
            centered
            width={483}
            visible={visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
        >
        <div className={styles.modalBox}>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>行李牌号：</span>
            <Input  className={styles.modalInput}/>
          </div>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>始发港：</span>
            <Select defaultValue="lucy" className={styles.modalInput}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>中转港：</span>
            <Select defaultValue="lucy" className={styles.modalInput}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>目的港：</span>
            <Select defaultValue="lucy" className={styles.modalInput}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>包裹类型：</span>
            <Select
                mode="multiple"
                defaultValue={['a10', 'c12']}
                onChange={this.handleChange}
                className={styles.modalInput} 
            >
                {children}
            </Select>
          </div>
          <div className={styles.modalSin}>
            <span className={styles.modalSpan}>城市：</span>
            <Select
                mode="multiple"
                defaultValue={['a10', 'c12']}
                onChange={this.handleChange}
                className={styles.modalInput} 
            >
                {children}
            </Select>
          </div>
          <p>注意：包裹城市选填并且可多选，设置后，非选择城市包裹无法确认打包</p>
        </div>
        </Modal>
        )
    }
}
export default OperatorManageModal
